<template>
	<!-- 商品显示 组件 -->
	<view
		:style="{ paddingTop: `${newData.pageUpSpacing }rpx`, paddingLeft: `${newData.pageLRSpacing}rpx`, paddingRight: `${newData.pageLRSpacing }rpx` }">
		<view v-if="newData.goodsList && newData.goodsList.length">
			<view class="goods-box" v-for="(item, index) in goodsList" :key="index"
				:style="{marginBottom:`${newData.pageGoodsSpacing}rpx`}">
				<goods-card :goodsInfo="item" :value="newData" v-if="item&&item.skus"></goods-card>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import api from '@/utils/api'
	import goodsCard from "components/goods-card/index";

	export default {
		components: {
			goodsCard
		},
		props: {
			value: {
				type: Object,
				default: () => {
					return {
						background: '#ffffff',
						pageUpSpacing: "10",
						paddingLRSpacing: "20",
						pageGoodsSpacing: "20",
						pageLRSpacing: "20",
						pageUDSpacing: "30",
						pageSpacing: 0,
						goodsList: []
					}
				}
			}
		},
		data() {
			return {
				theme: app.globalData.theme, //全局颜色变量
				newData: this.value,
				goodsList: [],
				newGoodsids: [],
				page: {
					current: 1,
					size: 5,
					total: 0
				}
			};
		},
		mounted() {
			this.getgoodsList()
		},
		methods: {
			// 获取活动商品
			getgoodsList() {
				if (this.newData.goodsList && this.newData.goodsList.length > 0) {
					// 获取id
					let goodsids = []
					this.newData.goodsList.forEach(v => {
						goodsids.push(v.id)
					})
					// goodsids = goodsids.slice(0,9)
					// 分页
					let index = 0
					// this.loadmore = true
					while (index < goodsids.length) {
						this.newGoodsids.push(goodsids.slice(index, index += this.page.size));
					}

					// 请求数据
					this.page.total = this.newGoodsids.length
					this.getGoods()
				}
			},
			getGoods() {
				if (this.page.current <= this.page.total) {
					this.$emit("goodsLoading", true)
					api.getHomepageGoods({
						ids: this.newGoodsids[this.page.current - 1].toString()
					}).then(res => {
						let data = res.data
						this.page.current++
						if (data.length > 0) {
							const goodsList = data.filter(v => {
								return v.shelf == '1' && v.skus && v.skus.length
							})
							if(!goodsList.length){
								this.getGoods()
								return
							}
							this.goodsList = [...this.goodsList, ...goodsList]
						}
					}).finally(() => {
						this.$emit("goodsLoading", '')
					})
				}else {
					this.$emit("goodsLoading", false)
				}
			}
		}
	}
</script>

<style scoped lang="scss">


</style>